<template>
	<view style="background:rgb(242,242,242);position: fixed;bottom: 0;right: 0;left: 0;top: 0;overflow: hidden;">
		<view style="height: 250rpx;width: 100%;background: rgb(229,55,63);border-bottom-right-radius: 30rpx;border-bottom-left-radius: 30rpx;padding-top: 120rpx;">
			<view style="color: #FFFFFF;font-size: 50rpx;font-weight: bold;text-align: center;">你好！张默欧</view>
		</view>
		<view style="margin: 0 20rpx;">
			<view style="padding: 20rpx 0 80rpx 0;border-radius: 20rpx;margin-top: -100rpx;background: #FFFFFF;">
				<!-- 插入模式 -->
				<uni-calendar :selected="info.selected" @change="change" @monthSwitch="monthSwitch"/>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				showCalendar: false,
				info: {
					date: '2019-08-15',
					startDate: '2019-06-15',
					endDate: '2019-010-15',
					lunar: true,
					range: true,
					insert: false,
					selected: []
				}
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.selected = [{
						date: '2019-08-20',
						info: '打卡'
					},
					{
						date: '2019-08-21',
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: '2019-08-22',
						info: '已记录'
					}
				]
			}, 500)
		},
		onLoad() {

		},
		methods: {
			open() {
				this.$refs.calendar.open()
			},
			change(e) {
				uni.navigateTo({
					url:'../tiaozhuan/tiaozhuan'
				})
				console.log('change 返回:', e)
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '已记录'
				})
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style>
	
</style>
